<template>
  <el-page-header :icon="null">
    <template #content>
      <div class="flex items-center">
        <el-avatar
          :size="32"
          class="mr-3"
          :src="Data.icon"
        />
        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">{{Data.name}}</span>
        <el-tag>{{Data.role}}</el-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-button type="primary" class="ml-2" @click="logout()">注销</el-button>
      </div>
    </template>
  </el-page-header>
</template>

<script setup lang="ts">
import router from '@/router';
import store from '@/store';
import axios from 'axios';
import { da } from 'element-plus/es/locale';
import jwt from 'jsonwebtoken'
import { onMounted, reactive, ref} from 'vue';
	
const Data = reactive<{
		icon : String,
		name : String,
		role : String,
	}>({
		icon : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
		name : "name",
		role : "role",
})

onMounted(()=>{
const tokenDate = jwt.decode(store.state.token);
if(tokenDate !== null){
	Data.icon = tokenDate.avatar;
	Data.name = tokenDate.username;
	Data.role = tokenDate.role;
}

})

function logout(){
	axios.get("/logout").then(function(response){
		if(response.data.code === 200){
			store.commit('RESET_STATE');
			router.replace("/login");
		}
		else{
			alert("logout fail!")
		}
	})
}

</script>